<docs>
  ## 开具证明列表
  ## props
</docs>
<template>
  <div>
    <Mheader class="index" @back_btn="goBack()" title="出具证明服务记录"></Mheader>
    <div class="search">
        <ul class="item-wrap">
          <li class="item" v-for="(item, index) in List" :key="index">
            <div class="item-title-wrap">
              <p class="item-title-text">{{ item.qxczsj == '' ? '申请日期：'+item.czsj:'取消日期：'+item.qxczsj}}</p>
              <p class="item-title-text-r" v-show="item.sfqx == '0'">
                审核状态:
                <span :class="[item.shzt == '2' ?'rightRed':item.shzt== '1'?'rightspan':'rightspan2']" >{{item.shztmc}}</span>
                <!-- <span :class="classObject" >{{item.shztmc}}</span> -->
              </p>
              <p class="item-title-text-r rightRed" v-show="item.sfqx == '1'">
               申请已取消
              </p>
            </div>
            <div class="item-title-text_center zt-dqy">
              <span class="_left" v-show="item.sfkqx == '1'" @click="qx(item)">{{item.sfqx == '0'?'取消申请':'已取消'}}</span>
              <span class="_right" @click="look(item)">查看</span>
              <span class="_center" v-show="item.shzt == '1'&& item.sfqx == '0'" @click="downLond(item)">预览</span>
            </div>
          </li>
        </ul>
    </div>
    <!-- 上拉刷新 -->
    <pagination-list @pullingDown="asyncFetch"
      :no-data="noData" class="search-result"
      :ajax-loading="ajaxLoading">
    </pagination-list>
  </div>
</template>
<script>
import Mheader from "@/ldry/group/mheader/mheader";
import $ from "@/common/js/axios";
import MessageCard from "@/ldry/group/messageCard/messageCard";
import PaginationList from "@/ldry/group/paginationList/paginationList";

export default {
  components: {
     Mheader, PaginationList
  },
  name: "ReverseList",
  data() {
    return {
      isRightRed:false, //红
      isRightspan:false, //绿
      isRightspan2:false, //橙
      List: [],
      page:1,
      pageSize: 10,
      ajaxLoading: false,
      noData:false
    };
  },
  methods: {
    asyncFetch(page) {
      this.GET_reverseList(page);
    },
    // 下载
    downLond(id){
      if (!id.kjzmid) return
      $.get("/dafwgl/wjscxz/checkXz", {params:{ id: id.kjzmid}} )
        .then(res => {
          let _data = res.returnData.executeResult
          if (_data == 0) {
            this.$alert({
              type: 'error',
              message: '信息暂无!'
            });
            return
          }else{
            this.$confirm('移动端暂不支持文件下载，请在PC端登录北京市人力社保局官网进行下载或打印。', '', {
              cancleBtnText: '取消',
              confirmBtnText: '确认'
            }).then(() => {
              // window.location.href = conf.urlPrefix + '/dafwgl/wjscxz/fjxz?id=' + id.kjzmid;
              // let a = document.createElement('a');
              // let url =conf.urlPrefix + '/dafwgl/wjscxz/fjxz?id=' + id.kjzmid;//下载url
              // // let href = '//i.demo.com/ExpCourse/dowloadFile?url=' + conf.urlPrefix + '/dafwgl/wjscxz/fjxz?id=' + id.kjzmid;//下载url
              // let filename = '出具证明.pdf';
              // a.href =  url;
              // a.download = filename;
              // a.click();
              console.log(id);

               this.$router.push({ name: "ReversePdf", query: { id:{kjzmid:id.kjzmid},tem:1 } });
             }).catch(() => {});
          }
        })
      // // // window.open(conf.urlPrefix + '/dafwgl/wjscxz/fjxz?id=' + id.kjzmid)

      // if (!id.kjzmid) return
      // window.location.href = conf.urlPrefix + '/dafwgl/wjscxz/fjxz?id=' + id.kjzmid;
      // let a = document.createElement('a');
      // let url =conf.urlPrefix + '/dafwgl/wjscxz/fjxz?id=' + id.kjzmid;//下载url
      // let filename = '出具证明.pdf';
      // a.href = url;
      // a.download = filename;
      // a.click();
    },
    down_link(id){
      $({
        method: "get",
        url: "/dafwgl/wjscxz/fjxz",
        params:{id:id.kjzmid},
        // responseType: "blob" //设置接收数据的类型
      }).then((res)=>{
        const fileName = res.headers["content-disposition"].split("=")[1];
      const _res = res.data;
      let blob = new Blob([_res]);
      let downloadElement = document.createElement("a");
      let href = window.URL.createObjectURL(blob); //创建下载的链接
      downloadElement.href = href;

      downloadElement.download = fileName; //下载后文件名
      document.body.appendChild(downloadElement);
      downloadElement.click(); //点击下载
      document.body.removeChild(downloadElement); //下载完成移除元素
      window.URL.revokeObjectURL(href); //释放掉blob对象
      }).catch((e) => {});
    },
    // 查看
    look(id){
      this.$router.push({name:"ReverseInfo",query:{kjzmid:id.kjzmid}})
    },
    // 取消申请
    qx(id){
      if (id.sfqx != '0') return
      this.$confirm('是否取消申请？', '', {
        cancleBtnText: '取消',
        confirmBtnText: '确认'
      }).then(() => {
        $.post('/dafwgl/kjzm/sqQx',{kjzmid:id.kjzmid}).then((res)=>{
          const flag = parseInt(res.returnData.executeResult, 10);
          if (flag === 1) {
            this.$alert({
              type: 'success',
              message: '申请取消成功!'
            });
            this.GET_reverseList()
          } else {
            this.$alert({
              type: 'warning',
              message: res.returnData.message
            });
          }
        }).finally();
      }).catch(() => {});
    },
    // ----
    goBack() {
      this.$router.go(-1);
    },
    // 获取申请列表
    GET_reverseList(page = 1) {
      this.ajaxLoading = true;
      this.$loading = true;
      $.get("/dafwgl/kjzm/kjzmCx", {params:{ pageSize: this.pageSize, pageNum: page }} )
        .then(res => {
          const data = res.returnData;
          // 无查询结果
          this.$loading = false;
          if (+data.executeResult === 0) {
            this.noData = true;
            if (page === 1) {
              this.List = []
            }
          } else {
            this.noData = false;
            // 有数据
            if (page === 1) {
              this.List = data.wdyy;
            } else {
              this.List = this.List.concat(data.wdyy);
            }
            // if (res.rowsCount -res.startNum < this.pageSize ) {
            //   this.ajaxLoading = true;
            // }
          }
        })
        .finally(() => {
          this.ajaxLoading = false;
        });
    }
  },
  created() {
    this.GET_reverseList();
  }
};
</script>
<style lang="scss" scoped>
@import "~common/scss/variable.scss";
.search {
  .item-wrap{
    position: relative;
    height: 100%;
  }
  .no-text {
    width: 984px;
    height: 300px;
    margin: 84px auto 0;
    border: $border;
    background: #fff;
    text-align: center;
    line-height: 300px;
  }
  .title {
    font-size: 45px;
    color: #fff;
    box-sizing: border-box;
    height: 8%;
    padding: $padding-base;
    background-color: #2e7ef7;
  }
  .item {
    border: $border;
    background-color: #fff;
    margin-bottom: $margin-base;
    font-size: $font-size-large;
    .item-title-text_center {
      // height: 50px;
      flex-direction:row;
      border-bottom: 1px solid #dbdbdb;
      padding: 0.44444rem;
      text-align: center;
      color: $color-base;
    }
    .item-title-wrap,
    .item-detail-wrap {
      border-bottom: $border;
      padding: $padding-base;
      color: $color-text-label;
      display: flex;
    }
    .item-title-text-r {
      flex: 0 1 44%;
      text-align: right;
    }
    .item-title-text {
      flex: 0 1 56%;
    }
    .item-detail-zt {
      flex: 0 1 30%;
      text-align: right;
      line-height: 2;
      font-size: $font-size-small;
    }
    .zt-btg {
      color: red;
    }
    .zt-dqy {
      height: 50px;
      color: $color-base;
      padding: $padding-base-half $padding-base;
    }
    .item-title-btn {
      flex: 0 1 30%;
      color: $color-blue-light;
      text-align: right;
      font-size: $font-size-small;
      &:before {
        content: "\e608";
        font-family: "iconfont";
        font-size: $font-size-large;
        padding-right: 20px;
      }
    }
    .item-detail {
      flex: 0 1 70%;
      color: $color-text-title;
      font-size: $font-size-small;
      padding-left: $padding-base * 2;
      position: relative;
      line-height: 2;
      &:before {
        position: absolute;
        left: 0;
        top: -35px;
        vertical-align: middle;
        padding-right: 20px;
        color: $color-blue-light;
        content: "\e60c";
        font-family: "iconfont";
        font-size: $font-size-ultra-plus;
      }
    }
  }
  .comments {
    color: $color-warning;
    font-size: $font-size-small;
    margin-left: $margin-base;
    margin-bottom: $margin-base;
  }
  /* 箭头 */
  .arrow::before {
    content: "";
    width: 30px;
    height: 30px;
    border-top: 5px solid #fff;
    border-left: 5px solid #fff;
    transform: rotate(-45deg);
    float: left;
    margin: 50px 0 0 50px;
  }
._left, ._right, ._center{
  width: 33%;
  height: 100%;
  line-height: 50px;
  float: left;
}
._right, ._center{
  float: right;
}
.rightspan{
  margin-right: 0;
}

}
</style>
